<script lang="ts">
export default {
  name: 'ViButton',
  props: {
    type: {
      type: String as () => 'default' | 'info' | 'primary' | 'error' | 'warning' | 'success',
      default: 'default'
    },
    circle: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {

  }
}
</script>

<template>
  <button class="vivid-button" :class="`vivid-button__${type}`"
    :style="circle ? { borderRadius: '50%', minWidth: 0, minHeight: 0, padding: '10px', height: 'auto' } : {}">
    <slot></slot>
    <slot name="icon">

    </slot>
  </button>
</template>

<style scoped>
.vivid-button {
  width: fit-content;
  padding: 4px 16px;
  min-width: 70px;
  height: 36px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #d9d9d9;
  font-size: 0.8rem;
  line-height: 1rem;
  background-color: var(--bg-color);
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
}

.vivid-button__default:hover {
  background-color: var(--bg-color);
  color: var(--primary-color);
  box-shadow: 0px 0px 20px -18px;
}

.vivid-button__info:hover {
  background-color: var(--bg-color);
  color: var(--primary-color);
  box-shadow: 0px 0px 20px -18px;
}

.vivid-button:active {
  transform: scale(0.98);
}

.vivid-button__primary {
  background-color: var(--primary-color);
  color: var(--color-white);
}

.vivid-button__primary:hover,
.vivid-button__primary:active {
  color: var(--color-black);
  background-color: var(--primary-color) !important;
}

.vivid-button__error,
.vivid-button__error:hover,
.vivid-button__error:active {
  background-color: var(--error-color) !important;
}

.vivid-button__warning,
.vivid-button__warning:hover,
.vivid-button__warning:active {
  background-color: var(--warning-color);
}

.vivid-button__success,
.vivid-button__success:hover,
.vivid-button__success:active {
  background-color: var(--success-color);
}
</style>
